ReactJS for Newbies in just 1 hour [old version]

Leotrieu

Leo Trieu

React

Full Source Code

Discussion Support

Course Description:

This short course will cover basic and core concepts that you need to know to get up and running with ReactJS in just 1 hour.

ReactJS is a Javascript library for building user interfaces. It's flexible, fast, easy to learn and fun to work with. ReactJS is designed to make the process of building modular, reusable user interface components simple and intuitive.

React was developed at Facebook and focuses on the 'View' aspect of MVC in web applications. React was built for the purpose of developing applications that are large in nature and have to deal with time changing data.

Who should join this course?

Anyone!!! Because:

  • It's FREE

  • You don't have to install any software to work with. Code right away using an online editor.

  • React is a small library and easy to learn.

  • This course is fun :)

  • While it is helpful to have an understanding of Javascript, it is not necessary.

You will walk away with:

  • A taste of how to build your very first React component.

  • How to handle events in components.

  • Understand two key concepts of React: State and Props.

  • How to reuse and nest components.

  • How to transfer data between Parent, Child components.

  • How to work with Array, Form.

  • Picture

    Tu Truong

    Very easy to understand about React. Thank u!

  • F9265f418e736a9d208652277606f106

    muneeb ullah

    good

  • Picture

    Saad Almoomen

    Thanks it is a good start

  • 796590c1b3b4f390753560dbc09910ca

    Sahidur Rahman Suman

    Amazing course.

  • 63fae67df3ba49a86093394921b2cf9c

    Sean Hoar

    Amazing how much can be done in so little time! And throw on some bootstrap or foundation css, and it starts looking pretty too!

  • F5520ae9e9dcf7180dfb28f03954a03c

    George Diab

    great way to understand the basics!

  • B927d76cfc5812393ea2a8cc912fb590

    Troy Broas

    Awesome! Bite sized videos make it easy to understand. You don't get overwhelmed with too much info at once.

  • Picture

    William Setiono

    amazing video tutor

  • Picture

    Boopathi Thangarasu

    nice video basicks

  • 851a08c6c5459276d569b85ea74c120f

    yemo.yannick@hotmail.com

    Amazing tutorial

  • 961702043317d393583e02dcff839e71

    cinthyaw

    i loved it this course

  • 4838237?v=3

    Thinh D. Bui

    Good course. Thank you so much

  • 543d228f0f7616b50adcb10f80f25d44

    Paul Arcoleo

    Straight forward, but powerful! I can't wait to add this into my own code. I may have to get the pro version of the course, to see how much more React can do.

  • Ca51c734d4b0163b41d0ea460dfff816

    DKNY

    Very nice! Thank you so much!

  • Picture

    Giáp Hiệp

    very nice

  • Photo

    liang lu

    In case someone use c9.io to code, you'll meet problem if you copy/paste Leo's code, here you find solution and my note https://community.c9.io/t/script-wont-load-in-react-app/4421/8 (too long, you may jump to the bottom of chat), happy coding guys ! Thanks Leo.

  • Picture

    Emil Rasborg

    I love this course! and I love react... So easy and so "just do this and this."

  • Photo

    Kamalpreet Singh Chauhan

    That was really good. I've got the basics. Now need to turn it up a level :-)

  • Photo

    Winston H

    Concise and straightforward. Well done, I enjoyed this short course.

  • 1f13fcc267722c0feb14b4aa8ef0bfd8

    Woody Torres

    I went through the first two tasks and found the instruction and explanations very easy to follow. This type of training is what I have been looking for to get started in coding.

  • Task 1: Quick Intro React

    • What is React? 0:50  
    • Why React? 2:00  
    • JSX 0:57  

  • Task 2: Getting Started

    • Your First React Component 4:55  
    • Working with Events 3:22  

  • Task 3: Data Flow between Components

    • Working with State 3:10  
    • Reusable Components 2:59  
    • Working with Property - Data 2:36  
    • Working with Property - Function 4:14  
    • Data between Child Components 7:08  

  • Task 4: Refactor Product List

    • Working with Array 4:34  
    • Adding Product Form 5:23  
    • Creating Product Function 4:06  
    • What's Next? 0:56