Learn React Concepts

Hello and welcome to this tutorial on how to get started with React. React is a JavaScript library used to create user interfaces. It enables us to create a modular and scalable app.

🎯 Prerequisite

NodeJs installed on your pc
Javascript knowledge

Let's get right into it.

Setup

Run npx create-react-app [project name] to setup your react project
.

The command above pulls certain folders and code from react

Change directory and start your react app by running:
cd react-tut && npm start

You should see this lovely page on opened on port 3000in your browser.

First main app

Now, let's write our first app. Let me clean up my src folder to rid of files that are not needed.

After removing the above file and clean up. We have:

Visit your browser to view the changes made into our app

Components

Let's see how we can modularize or compose our app using functions. The simplest way to define a component is to write a JavaScript function:

Two important things to note here:

1. We created the Emojis component
2. We are rendering the Emojis component in the App component.

Everything should still remain the same in our browser.

To quickly write 4 line of emojis that are reacting on my browser, all i need do is to duplicate the Emoji component.

Head over to your browser.

Exporting and Importing modules

Let's separate our concerns i.e we move the Emoji component into another file entirely using the import and export functions

Everything should still works the same, only that we have a more cleaner code base.

Props

Let's create a Greeting.js component

export const Greeting = () => {
  return (
    <div>
      <h1>Hello James</h1>
    </div>
  );
};

And import inside our App.js comoponent

import './App.css';

import { Emojis } from './components/Emojis';
import { Greeting } from './components/Greeting';

function App() {
  return (
    <div className="App">
      <Emojis />
      <Greeting />
    </div>
  );
}
export default App;

We should have something like this

So what if we want to output the same greetings to different people. We can use props to achieve that. Let's refactor our code to use the props passed in as a parameter

Our result should look like:

State Management and Event Handling

A state is a variable that is maintained inside a component

Explanation

1. We use the useState hook to create a state variable called message.
2. We set the initial value of the message to 'Is react the best framework?'.
3. We create a button that when clicked, sets the message to 'yes of course!'.
4. We return a div with a h1 tag that contains the message. 

Let us ask, by clicking the button to ask if react is the best framework.

Before

After

Before we move on, let's refactor this code a bit.
Message.js

import { useState } from 'react';

export const Message = () => {
  const [message, setMessage] = useState('Is react the best framework?');
  const handleMessage = () => {
    setMessage('yes of course!');
  };
  return (
    <div>
      <h1>{message}</h1>
      <button onClick={handleMessage}>Ask</button>
    </div>
  );
};

In the code above, we separated the handleMessage as a function on its own.

Conditional Rendering

This is a way of writing conditions in react just like our normal if/else or switch cases.
Let create a file and call it Gender.js. We will write a logic

As long as isMale = true; the result render to will be:

If isMale = false;, the result will be:

Rendering List using map.

Say we want to output a list of animals from an array.

In App.js

Result

Conclusion

I hope this post was helpful. I hope to continue with topics and concepts like Styling [CSS Stylesheets, Inline styles,CSS modules], Form Submission, Data fetching using Axios or the in-built fetch, Search Queries and so on.
Thanks for reading

Resources

ReactJs
React 18