Getting Started

Without a shadow of a doubt, using create-react-app is the best way to start a React project. (I won't go into that now, but you can see a tutorial here).

Components

Everything in React is considered a component, and they are the building blocks of your app. It's your job to put these blocks together! Components are typically JavaScript functions or classes. Since we're in a hurry (that 5 minute clock is ticking!) we'll focus on functional components. A functional component typically looks like:


function HelloWorld (){
    return (
        <div>Hello World!</div>
    )
}

To use this component, we use the name of the component within <> tags (kinda like our own custom HTML tag):

<div>
    <HelloWorld/>
</div>  

What happens here is the markup in the return method of your component get's rendered in placed of the component tag. So on the webpage, the code above will look like:

<div>
    <div>Hello World!</div>
</div> 

Fancy eh? Components can be nested within other components:

function App (){
    return (
        <div>
            <HelloWorld/>
        </div>
    )
}

You can add as many components as you like:

function App (){
    return (
        <div>
            <HelloWorld />
            <AnotherComponent />
            <SomeOtherComponent />
        </div>
    )
}

Props

Props or "properties" are data that you can pass to your components. React focuses on 1 way data flow, so you cannot pass data to a parent component from a child. Props can be anything you want, and can contain anything you want. Props are defined within your component tag:

<div>
    <HelloWorld text="Hello World"/>
</div>  

Here, we created a text prop with a value of "hello world". You can have as many props as you like:

<div>
    <HelloWorld
        text="Hello World"
        anotherProp="this is another prop"
        numberProp=1/>
</div>  

Now, within your component, you can read props from the props parameter. React will automatically map all the properties to the props variable, so you don't have to do anything! You can access them using the dot notation:


function HelloWorld (props){
    return (
        <div>{props.text}</div>
    )
}

JSX

You may have noticed in the code snippet above this funny line:

<div>{props.text}</div>

This is called an embedded expression. Sounds complicated, but it's not. All you need to know is that code with the {} brackets is run as JavaScript. So props.text gets evaluated and the value for this property is rendered. In this case, it's "Hello World". You can also call functions from within JSX.

State

State is an object that determines how that component renders & behaves. For example, in our HelloWorld component, its state could be Hello World!.  When state changes, any JSX that relies on that state will update or re-render.

Functional components store state using Hooks (check out this short guide for more detail).

To create a state variable, we need a simple one-liner:


const [text, setText] = useState('Hello World!')

We can even initialise state from our props:


function HelloWorld (props){
    const [text, setText] = useState(props.text)
    
    return (
        <div>{text}</div>
    )
}

Whenever the text variable gets changed (via the setText function) the text will re-render in the JSX.

Handling Events

React/JSX makes it super easy to handle events (click events, hover events, etc):


<div onClick={()=>setText('You Clicked the Text!')}>{text}</div>

The onClick() property fires when the user clicks the div. You will notice that again we use {} to signify that we want to run some JavaScript, and we have a function that calls the setText function we defined earlier. This updates the text state variable, which in turn updates the text. React has many event handlers, which you can use simply by adding to your element.

Checkout this code sandbox to see the examples from this article in action: