create-react-app, Hello World, 2022 edition

ah! That nucleus thing.

My 4 month front end freshers batch for MERN is still ongoing. Dumping even more sample code and blog posts. This one is about create a react app for the very first time.

I also distinctly remember, writing something similar before. You can see that here.

create-react-app 17 with Typescript 4.1 | by Jay | ProjectWT | Medium

As always, the full code is available on the github repository.

Okay, let’s look at the key points. Basic commands that help you create a new project.

    npx create-react-app my-app
    cd my-app
    npm start

Then, I would strongly recommend adding bootstrap CSS for some basic styling. This would be in the ‘index.html’ file.

link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

Here is how you might create and show a simple component.

Here is a more complex component.

Here is how, you might use this component, in another component. Remember, React JS is all about using components, and passing down objects and data.

And, that’s all there is to it.

One more thing, after going through this, you may wish to see a more ‘advanced’ but still a ‘hello world’ project here.

React JS Starter — Consumes NASA APOD API with Redux and Thunks | by Jay | ProjectWT | Jul, 2022 | Medium

I work as a full time freelance coding tutor. Hire me at UpWork or Fiverr or Stack Overflow. My personal website is here. Find more of my art at Behance and Unsplash. Also, I have a Podcast about everyday life. And, a 2nd Podcast, where I talk about freelancing.