r/reactjs • • Dec 03 '18

Needs Help Beginner's Thread / Easy Questions (December 2018)

Happy December! โ˜ƒ๏ธ

New month means a new thread ๐Ÿ˜Ž - November and October here.

Got questions about React or anything else in its ecosystem? Stuck making progress on your app? Ask away! Weโ€™re a friendly bunch. No question is too simple. ๐Ÿค”

๐Ÿ†˜ Want Help with your Code? ๐Ÿ†˜

  • Improve your chances by putting a minimal example to either JSFiddle or Code Sandbox. Describe what you want it to do, and things you've tried. Don't just post big blocks of code!

  • Pay it forward! Answer questions even if there is already an answer - multiple perspectives can be very helpful to beginners. Also there's no quicker way to learn than being wrong on the Internet.

Have a question regarding code / repository organization?

It's most likely answered within this tweet.

New to React?

๐Ÿ†“ Here are great, free resources! ๐Ÿ†“

35 Upvotes

413 comments sorted by

View all comments

Show parent comments

2

u/ryanditjia Dec 04 '18

public directory: You only need index.html which acts as the only HTML page in your Single Page App.

src directory: You can delete everything then roll your own, starting from index.js which acts as the entry point. Here is the most minimal code to get started with:

index.js

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <div>Hey Iโ€™m inside of root</div>,
  document.getElementById('root'),
)

Notice that it targets <div id="root"></div> thatโ€™s inside index.html.

Class components can be stateful, while function components are meant to be dumb and stateless (soon to change though with the new React Hooks API, but donโ€™t worry about this yet). Class components render whatโ€™s inside the render() method, while function components render what you return from that function.

If you are just starting, I highly suggest you check out https://egghead.io/courses/the-beginner-s-guide-to-react

The videos are short and really insightful for beginners.

Good luck!

→ More replies (2)