Getting Started with ReactJS.

So, earlier this year I got introduced to Web Development using ReactJS & I absolutely loved it. But in the beginning, I had no idea what I was doing & how to go about the development of a website. Reading about it and watching tutorials on youtube really helped me through the ' I-have-no-idea-what-I'm-doing ' phase. Not that I'm completely out of that phase yet :) I'm getting there. Anyway, I hope you find this helpful.

That being said, Let's get started.

The topics we will be covering:

What is ReactJS?
Why ReactJS?
Fundamentals

What is ReactJS?

React is the most popular front-end JavaScript library in the field of web development.

React is a JavaScript library for building user interfaces. Its core principles are declarative code, efficiency, and flexibility. It is used by large, established companies and newly-minted startups alike (Netflix, Airbnb & Instagram to name a few). A typical React app contains many components. They are reusable and can interact with each other.

Why ReactJS?

Declarative: Declarative views make the code more predictable and easier to debug.

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Component-Based: We encapsulate behaviors into small units called components in the component-based approach. Components are the building blocks of any React application, and a single app usually consists of multiple components. These components have their logic and controls, and they can be reused throughout the application.

Build encapsulated components that manage their own state, then compose them to make complex UIs.
Technology-stack agnostic: React does not care what tech stack you use. You can develop new features in React without rewriting code. It can render on the server using node js.

We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
Easy creation of dynamic applications: React makes it easier to create dynamic web applications because it requires less coding and offers more functionality

Fundamentals

Components
JSX
Props

Components

Just like I mentioned before, Components are reusable pieces of code that are a single JavaScript function, usually within a single file. It makes our code readable and easy to follow. Don't worry you'll know more about this in the coming blogs :)

JSX

JSX is an extension of the JavaScript language syntax. Very similar to HTML, JSX provides a way to structure component rendering using syntax familiar to many developers. Something like this:

function Title() {
   return <h1>This is a Title component</h1>
}

and

const element = <h1>Hello, world!</h1>;

Props

Props(short for properties) are a way for us to pass data from one component to another. These properties are read-only.

For example,

function Hello(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Hello name="Rose" />
      <Hello name="Lissa" />
      <Hello name="Natalie" />
    </div>
  );
}

We'll know more in the next one ;)

That's it for this blog, I hope you learned a little something about React and are interested to know more. Because more blogs like this will be coming your way very soon! (Feedback Appreciated)

Till then,You got this✨

-V

Getting Started with ReactJS

Series: React 101 for dummies

Hello👋