-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[www] Fix quotes, fixes „Invalid date“ of latest blog post #4092
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,26 +1,23 @@ | ||
--- | ||
title: How to Build a Website with React | ||
date: “2018-02-16” | ||
date: "2018-02-16" | ||
author: Shannon Soper | ||
--- | ||
|
||
# What is React? | ||
|
||
React is a fantastic and wildly popular tool for building websites and apps, and it creates a world where JavaScript and HTML live in happy harmony in the same files and efficiently renders your ever-changing data to the browser. | ||
|
||
|
||
## Declarative | ||
|
||
With React, you can create reusable components that will always render the same data in the same way, which wasn't always the case pre-React. Let’s say you’re a huge Olympics fan and you build a React website for tracking scores. Users who visit your site won’t need to wait for the entire tree to deconstruct and reconstruct when they click a button on your site or when the newest data on the half-pipe is available. React components will efficiently update to accommodate the changing data. | ||
|
||
|
||
## Reactive | ||
|
||
React uses a virtual tree reconciliation method to *react* to changes in input data. Whenever any data changes, instead of rebuilding the whole DOM tree (which would be slow) — it decides what changed in its virtual DOM and then makes the smallest number of DOM changes necessary. | ||
React uses a virtual tree reconciliation method to _react_ to changes in input data. Whenever any data changes, instead of rebuilding the whole DOM tree (which would be slow) — it decides what changed in its virtual DOM and then makes the smallest number of DOM changes necessary. | ||
|
||
Almost all frameworks nowadays (e.g. Angular, Vue, etc.) are approaching similar mechanisms. The virtual tree is in contrast to something like vanilla JS or jQuery where you are setting/updating DOM nodes directly. | ||
|
||
|
||
## Easy to add to the rest of your stack | ||
|
||
Switching your site(s) to new technologies optimally involves incrementally transferring your site over, page by page, to the new technology. This is difficult to do with some new frontend technologies which want to control the entire page. These technologies are like your friend who wants to take over every social event they get invited to. | ||
|
@@ -29,28 +26,29 @@ React is not picky; it is happy to be used in only parts of your site, so you ca | |
|
||
## Component-Based | ||
|
||
React components and subcomponents tend to come from breaking your website down into the smallest bits possible, using the [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle). | ||
React components and subcomponents tend to come from breaking your website down into the smallest bits possible, using the [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle). | ||
|
||
For example, in a To-Do list, the hierarchy of components would include: | ||
|
||
For example, in a To-Do list, the hierarchy of components would include: | ||
* Whole list | ||
* Title | ||
* add a to-do line | ||
* to-do line | ||
* subtasks within to-dos | ||
* show completed to-dos button | ||
* Title | ||
* add a to-do line | ||
* to-do line | ||
* subtasks within to-dos | ||
* show completed to-dos button | ||
|
||
![To-Do List](to-do-list.png) | ||
|
||
The [Reactjs.org website recommends](https://reactjs.org/docs/thinking-in-react.html) that you work with your designer(s) when creating a hierarchy of React components and subcomponents, because the designers probably already have names for each small piece of the design, and you can make sure your components have the same names. | ||
The [Reactjs.org website recommends](https://reactjs.org/docs/thinking-in-react.html) that you work with your designer(s) when creating a hierarchy of React components and subcomponents, because the designers probably already have names for each small piece of the design, and you can make sure your components have the same names. | ||
|
||
React components work just like other functions in any programming language because we call components with some input (called “property” in React) and spit out an output (a chunk of UI in React). Also, components are reusable and can contain other components. All these things are the same as other functions in other programming languages. | ||
|
||
|
||
## Using React with Gatsby | ||
|
||
GatsbyJS is a great way to build websites with React and actually solves some unique problems by making the following things more straightforward: | ||
* *Pulling in data:* In Gatsby, GraphQL and plugins help you use data from nearly any source (including both traditional CMSs and headless CMSs. Some people I’ve talked to recently even built their Gatsby sites with Google sheets as the data source. | ||
* *Creating pages and routes:* Gatsby also gives you an intuitive interface for creating pages and routes. So intuitive, in fact, that when I talked to a coworker, I said, “I remember creating pages and links to those pages from other pages, but I don’t remember creating any routes in Gatsby.” They responded, “Yeah, Gatsby took care of that for you.” | ||
* *Solving performance problems:* Gatsby sites rarely has performance problems due to Gatsby’s way of loading static files. | ||
|
||
* _Pulling in data:_ In Gatsby, GraphQL and plugins help you use data from nearly any source (including both traditional CMSs and headless CMSs. Some people I’ve talked to recently even built their Gatsby sites with Google sheets as the data source. | ||
* _Creating pages and routes:_ Gatsby also gives you an intuitive interface for creating pages and routes. So intuitive, in fact, that when I talked to a coworker, I said, “I remember creating pages and links to those pages from other pages, but I don’t remember creating any routes in Gatsby.” They responded, “Yeah, Gatsby took care of that for you.” | ||
* _Solving performance problems:_ Gatsby sites rarely has performance problems due to Gatsby’s way of loading static files. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Small typo - 'has' should be 'have' There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Oh maybe I can do this change through GitHub - I'll try it now. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It worked! |
||
|
||
Gatsby combines the awesomeness of React with all the friendly helpfulness you’d hope for in a modern PWA framework. Happy coding, and let us know how it goes by joining us on [Twitter](https://twitter.com/gatsbyjs) and [Github](https://github.com/gatsbyjs/gatsby)! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey @KyleAMathews and @m-allanson, sorry for not merging this myself, got sidetracked a little. :-/
What I wanted to check before merging is what I just checked now: I have Prettier(-eslint) set up to run everytime I save, thus all the reformatting around here w/o explicitly running
format-markdown
. Before merging I noticed that the list above doesn't display correctly after Prettier changed indention from four to two spaces (after/before with four spaces):Will take a look at
using-remark
and open an issue.