React beginners tutorial Part -1 Playing

React is one of the most popular technologies in web development. Many of the world's best firms use it. This is post is for for the beginners in the field of web development who are foreign to this library.

What is React? why react?

React is frontend library which you can use to create interactive user interfaces. It can help you create apps where users integration is necessary. It is lightweight and cost effective as well.

Getting up and ahead

To get started with react you first need a quick setup tool. A tool that will provide you with essential config for your react app. You can pick between many different such tools but the two most popular once are.

• create-react-app -> The official and slow
• vite -> the unofficial and fast

Even more beginner friendly are online code editors such as stackblitz, codesandbox and others.

I prefer codesandbox here, you can signup and start doodling around to get a feel of it.

When you start a new react template you will see something like this.

The file structure looks like this

|-public
|----index.html
|-src
|----App.js
|----index.js
|----styles.css
|-package.json

The public contains things publicly accessible as you can see the function visible gets exported, then the index.js imports it and plunges it into a div. All the app in a single div!!

So, src (short for source ) is where the actual magic happens. All your stylesheets, code and actual stuff

Doodling

As you can see there is something like html over the function the function is actually returning html or more precisely jsx.

Jsx or Javascript XML (something like Javscript markup) is actual javascript code that you write but with the help of babel it is transformed into actual javascript (the one you see in static files. You can have dynamic properties and a lot of other superpowers in there. Try changing the code in the App function to this.

export default function App() {
  const hi = "hi alex"
  return (
    <div className="App">
      <h1>{hi}</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

yes you can actually just plunge values in there. Just open up curly brackets and throw the stuff in it.

Moreover you can assign jsx as values to a variable. Come on do something with it.

Styling up

You can give your elements a className (not class because it is a reserved keyword in javascript).

export default function App() {
  const hi = "hi alex"
  return (
    <div className="App">
      <h1>{hi}</h1>
      <h2 className="boring">
          Start editing to see some magic happen!
      </h2>
    </div>
  );
}

give boring a style in styles.css You can see that it is imported on top; that is just it! Import stylesheets.

Conclusion

That was all for this post, read the second part to get a feel of the dynamicness with user interaction. Till then keep playing